<!DOCTYPE html>
<html class="x-admin-sm">
    
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="../css/font.css">
        <link rel="stylesheet" href="../css/xadmin.css">
        <script src="../lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="../js/xadmin.js"></script>
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    
    <body>
        <div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">演示</a>
                <a>
                    <cite>导航元素</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
                <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
            </a>
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <table class="layui-table layui-form" id="order-test" lay-filter="order-test">
                                <thead>
                                <tr>
                                    <td>订单信息</td>
                                </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                       <td>订单编号</td>
                                        <td id="ordernum"></td>

                                        <td>下单时间</td>
                                        <td id="ordertime"></td>
                                    </tr>
                                    <tr>
                                        <td>路线名称</td>
                                        <td id="productname"></td>
                                        <td>出发城市</td>
                                        <td id="cityname"></td>
                                    </tr>
                                    <tr>
                                        <td>出发时间</td>
                                        <td id="departuretime"></td>
                                        <td>出游人数</td>
                                        <td id="peopleCount"></td>
                                    </tr>
                                <tr>
                                    <td>其它信息</td>
                                    <td colspan="3" id="orderdesc">
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            </div>
                            <div class="layui-card-body ">
                            <table class="layui-table layui-form" id="travertest">
                               </table>
                                <!--<thead>
                                <tr>
                                    <td>游客信息</td>
                                  </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>人群</td>
                                    <td>姓名</td>
                                    <td>性别</td>
                                    <td>手机号码</td>
                                    <td>证件类型</td>
                                    <td>证件号码</td>
                                </tr>
                                <tr>
                                    <td id="travellertype"></td>
                                    <td id="name"></td>
                                    <td id="sex"></td>
                                    <td id="phonenum"></td>
                                    <td id="credentialstype"></td>
                                    <td id="credentialsnum"></td>
                                </tr>
                                </tbody>
                            </table>-->
                            </div>
                        <div class="layui-card-body ">
                            <table class="layui-table layui-form" id="people-test">
                                <thead>
                                <tr>
                                    <td>联系人信息</td>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>会员</td>
                                    <td id="nickname"></td>
                                    <td>联系人</td>
                                    <td id="mname"></td>
                                </tr>
                                <tr>
                                    <td>手机号</td>
                                    <td id="mphonenum"></td>
                                    <td>邮箱</td>
                                    <td id="email"></td>
                                </tr>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>
        var oid;
        function child({id}) {
            oid = id
            console.log('%c id', 'color: green; font-size: 24px;', oid);

            layui.use(['laydate', 'form', 'table'],
                function () {
                    var laydate = layui.laydate;
                    //执行一个laydate实例
                    laydate.render({
                        elem: '#start' //指定元素
                    });

                    //执行一个laydate实例
                    laydate.render({
                        elem: '#end' //指定元素
                    });

                    //表格数据渲染
                    let table = layui.table;
                    var did = "id=" + oid;


                    table.render({
                        elem: '#travertest'
                        , url: '/order/queryOrderPassengerById' + "?" + did
                        , cols: [[
                            {field: 'travellerType', width: 200, title: '人群',templet:function (data) {
                                console.log(data);
                                   return data.passenger.travellerType;
                                }}
                            , {field: 'name', width: 200, title: '姓名',templet:function (data) {
                                    return data.passenger.name;
                                }}
                            , {field: 'sex', width: 200, title: '性别',templet:function (data) {
                                    return data.passenger.sex;
                                }}
                            , {field: 'phoneNum', width: 200, title: '手机号',templet:function (data) {
                                    return data.passenger.phoneNum;
                                }}
                            , {field: 'credentialsType', width: 200, title: '证件类型',templet:function (data) {
                                    return data.passenger.credentialsType;
                                }}
                            , {field: 'credentialsNum', width: 200, title: '证件号码',templet:function (data) {
                                    return data.passenger.credentialsNum;
                                }}

                        ]]
                    });

                    $.ajax({
                        url: '/order/queryOrderPassengerById'
                        , dataType: 'json'
                        , data: did
                        , success: function (data) {
                            console.log(data)
                            $('#productname').html(data.data[0].product.productName);
                            $('#cityname').html(data.data[0].product.cityName);
                            $('#departuretime').html(data.data[0].product.departureTimeStr);
                            $('#ordertime').html(data.data[0].orderTime);
                            $('#ordernum').html(data.data[0].orderNum);
                            $('#orderdesc').html(data.data[0].orderDesc);
                            $('#peopleCount').html(data.data[0].peopleCount);
                            $('#nickname').html(data.data[0].member.nickName);
                            $('#mname').html(data.data[0].member.name);
                            $('#mphonenum').html(data.data[0].member.phoneNum);
                            $('#email').html(data.data[0].member.email);
                        }
                    });

                })
        }
        </script>

</html>